import React, { useEffect, useState } from "react";

import { http } from "@/plugin/request";

// 修饰器
// const decorator = () => {
//   function log(target: User, name: string, descriptor: any) {
//     descriptor.value = function (e: any) {
//       console.log("descriptor", e);
//       return 12323;
//     }; // 重新赋值属性
//     // descriptor.writable = false // 设置不可修改
//     return descriptor;
//   }
//   class User {
//     @log
//     getName() {
//       return "111";
//     }
//     @log // 改写getNameN属性
//     getNameN() {
//       return "222";
//     }
//   }
//   let a = new User();
//   console.log(a, a.getName());
// };

const decoratorTest = () => {
  function classDecorator(classObj: any) {
    console.log("classDecorator", classObj);
  }

  function functionDecorator(target: User, name: string, descriptor: any) {
    console.log("functionDecorator", target, name, descriptor);
  }

  function filedDecorator(filed: string) {
    return function (target: User, name: string, descriptor: any) {
      console.log("filedDecorator", target, name, descriptor, filed);
    };
  }

  function valueDecorator(target: User, propertyKey: string) {
    console.log("valueDecorator", target, propertyKey);
  }

  function paramsDecorator(
    target: any,
    methodName: string,
    paramsIndex: number
  ) {
    console.log("paramsDecorator", target, methodName, paramsIndex);
  }
  @classDecorator
  class User {
    @valueDecorator
    public name: string = "234234";
    constructor() { }
    @filedDecorator("234234234")
    @functionDecorator
    getName() {
      return "111";
    }
    testParams(@paramsDecorator params: string) {
      console.log(params);
    }
  }
  let user = new User();
  console.log(user.getName());
  user.testParams("234234");
};

export default function () {
  useEffect(() => {
    decoratorTest();
    // http
    //   .setRequest("GET", "http://localhost:3000/api/nest/findtest?id=1")
    //   .then((res) => {
    //     console.log(res, "get请求");
    //     // http
    //     //   .setRequest("GET", "http://localhost:3000/api/nest/findList")
    //     //   .then((res) => {
    //     //     console.log(res, "post请求");
    //     //   })
    //     //   .catch((err) => {
    //     //     console.log(err, "post请求错误");
    //     //   });
    //     http
    //       .setRequest("POST", "http://localhost:3000/api/nest/save", {
    //         name: "洪伟江",
    //         age: 28,
    //         sex: 1,
    //         isStudent: false,
    //         like: ["篮球", "游戏"],
    //       })
    //       .then((res) => {
    //         console.log(res, "post请求");
    //       })
    //       .catch((err) => {
    //         console.log(err, "post请求错误");
    //       });
    //   })
    //   .catch((err) => {
    //     console.log(err, "get请求错误");
    //   });
  }, []);
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // let formData = new FormData()
    // if (!e.target.files) return;
    // formData.append("file", e.target.files[0]);
    // fetch("http://localhost:8080/testApi/Upload", { method: 'post', headers: {}, body: formData }).then(r => r.json().then(console.log))
    let files = e.target.files || []
    if ((files?.length || 0) <= 0) return;
    let formData = new FormData()
    for (let i=0; i< files.length; i++) {
      formData.append('file[]', files[i]);
    }
    fetch("http://localhost:8080/testApi/MultipartUpload", { method: 'post', headers: {}, body: formData }).then(r => r.json().then(console.log))
  }
  return <div>
    <input type="file" onChange={handleChange} multiple />
    nestjs
  </div>;
}
